<template>
  <div class="search_suggest">
    <van-cell
      v-for="(text, index) in suggestions"
      :key="index"
      icon="search"
      @click="$emit('search', text)"
    >
      <div slot="title" v-html="heightLight(text, searchText)"></div>
    </van-cell>
  </div>
</template>

<script>
import { getSearchSuggest } from '@/api/search.js'
import { debounce } from 'lodash'

export default {
  name: 'searchSuggest',
  data() {
    return {
      suggestions: []
    }
  },
  props: {
    searchText: {
      type: String,
      required: true
    }
  },
  watch: {
    searchText: {
      // 当searchText发生变化时就会调用这里的handler函数 handler函数是固定的
      handler: debounce(function(val) {
        this.loadSearchSuggest(val)
      }, 200),
      immediate: true // 该回调函数将会在侦听之后立即被调用
    }
  },
  methods: {
    // 监听输入框 触发联想请求
    async loadSearchSuggest(q) {
      try {
        const { data } = await getSearchSuggest(q)
        this.suggestions = data.data.options
      } catch (err) {
        this.$toast('联想数据获取失败', err)
      }
    },
    // 高亮显示关键字
    // 参数 source: 原始字符串
    // 参数 keyword: 需要高亮的关键词
    // 返回值：替换之后的高亮字符串
    heightLight(source, keyword) {
      // /searchContent/ 正则表达式中的一切内容都会当做字符串使用
      // 这里可以 new RegExp 方式根据字符串创建一个正则表达式
      // RegExp 是原生 JavaScript 的内置构造函数
      // 参数1：字符串，注意，这里不要加 //
      // 参数2：匹配模式，g 全局，i 忽略大小写
      const reg = new RegExp(keyword, 'gi')
      return source.replace(
        reg,
        `<span style="color: #3296fa">${keyword}</span>`
      )
    }
  }
}
</script>

<style scoped lang="less"></style>
